<style type="text/css">
.layout_clear{clear:both;}
#style_tool_bar h3{ text-align:left;}
#style_tool_bar ul {background: #e6e6e6 url(<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/js/images/tab_bg.gif) 0 50% repeat-x; width:100%; margin-top:0px;}
#style_tool_bar ul li{border-right: 1px solid #ccc;}
#style_tool_bar ul li a{ font-weight:bold;}
.layout_line{margin-top:10px;}
.layout_line div{width:52px; height:60px; float:left; margin-left:10px;}
.layout_bs1_1{background:url(/public/images/t.gif) no-repeat 0 -440px;}
.layout_bs2_1{background:url(/public/images/t.gif) no-repeat 0 -250px;}
.layout_bs2_2{background:url(/public/images/t.gif) no-repeat 0 -312px;}
.layout_bs2_3{background:url(/public/images/t.gif) no-repeat 0 -375px;}
.layout_bs3_1{background:url(/public/images/t.gif) no-repeat 0 0;}
.layout_bs3_2{background:url(/public/images/t.gif) no-repeat 0 -60px;}
.layout_bs3_3{background:url(/public/images/t.gif) no-repeat 0 -123px;}
.layout_bs3_4{background:url(/public/images/t.gif) no-repeat 0 -185px;}
.layout_view_line{border:#0066FF dotted 2px;  background:#DAE7F3; height:100px;}
.layout_module li{display:block; float:left; width:235px; height:25px; margin:5px 0 0px 0; text-align:left; font-weight:normal;}
.sortableItem h2{cursor:move;}
#tab_pannel{ padding-right:2px;}
#fragment-1,
#fragment-2,
#fragment-3,
#fragment-4,
#fragment-5,
#fragment-6{ background:#fff url(<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/img/mb_top_bg.gif) 0 bottom repeat-x; border:1px #ABBDDE solid; padding-bottom:20px;}
#fragment-4 li,
#fragment-5 li,
#fragment-6 li{ float:left; width:19%; text-align:center; margin-bottom:5px;}
#fragment-4 li a img,
#fragment-5 li a img,
#fragment-6 li a img{ border:1px #ccc solid; padding:2px;}
#fragment-4 li a span,
#fragment-5 li a span,
#fragment-6 li a span{ display:block; color:#666; text-decoration:none;}
#fragment-4 li a:hover img,
#fragment-5 li a:hover img,
#fragment-6 li a:hover img{ border:1px #FFCC00 solid;}
#fragment-6 h2{ font-size:12px; margin-bottom:10px; background:url(<?php echo $this->BaseUrl;?>/public/images/banner_line.gif) 0 bottom no-repeat; line-height:20px; font-weight:normal; height:20px; text-align:left;}
#fragment-6 h2 span{ display:block; padding-left:10px; background:url(<?php echo $this->BaseUrl;?>/public/images/icon_banner.gif) 0 center no-repeat;}
#fragment-6 h2 a{ color:#FF3300;}
#fragment-6 .mb-div{ overflow-x:hidden;overflow:scroll; height:140px;}
#fragment-6 li{margin-bottom:10px;}
.module_column { padding-bottom:100px;}
.movehand{cursor:move;}
.ui-sortable-placeholder { border:#0066FF dotted 2px;  background:#DAE7F3; }
/*.menu_item{float:left; width:210px; padding:3px; margin-left:15px;}*/

</style>
<!--
<script language="javascript" type="text/javascript" src="<?=$this->baseUrl;?>/public/scripts/SevenColorPicker.js"/></script>
-->
<script language="javascript">


var sortableChange = function(e, ui){
	if(ui.sender){
		ui.helper.css("width",ui.placeholder.width());
	}
};

$(function() {
	$(".module_column").sortable({
		connectWith: '.module_column',
		opacity: 0.8,
		revert: true,
		helper: 'clone',
		placeholder: "layout_view_line", 
		start: function(e,ui) {				
			ui.helper.css("width", ui.placeholder.width());
		},
		
		change: sortableChange
		//stop:saveLayout
	});
	$(".module_column").addClass("movehand");
	$(".module_column").disableSelection();
	//changeIcon();
});


//保存模块排序
function savelayout(){

	document.moduleForm.layoutinfo.value = $('#left').sortable('serialize',{key:'leftmod[]'}) + '&' + $('#right').sortable('serialize',{key:'rightmod[]'}) + '&' + $('#center').sortable('serialize',{key:'centermod[]'});
	//alert(document.moduleForm.layoutinfo.value);
}


//删除模块
function removeModule(code)
{
	$("#module_" + code).remove(); 
}

//添加模块
function addModule(code,place)
{
		
	$.post("<?php echo $this->urls('get','modules','space',array('uid'=>$this->uid));?>",{'code':code},	
	function(data){
		$('#' + place).append(data)
	})
}

//添加、删除模块
function setModule(t)
{
	if(t.checked == true){
		var tmp = null;
		addModule(t.value , 'center');
	}else{
		removeModule(t.value);
	}
}

//设置布局
function setLayout(clo,type,classname)
{
	var widthclass = 'w950';
	switch(clo){
		case 2:
			$('#right').children().clone(true).appendTo('#left');
			$('#right').empty();
			break;
		case 3:		
			break;
	}
	$('#content').removeClass();
	$('#content').addClass(widthclass + ' ' + classname);
	document.moduleForm.contentclass.value = widthclass + " " + classname;	
}

//关闭编辑功能
function closeEdit()
{	
	if(!confirm('修改没有保存，确认退出？'))return;
	$('#style_tool_bar').hide();	
	$('#left').sortable( "disable" );
	$('#center').sortable( "disable" );
	$('#right').sortable( "disable" );
	$.post("<?php echo $this->urls('exit','modules','space',array('uid'=>$this->uid));?>" ,null,
	function(data){
		document.location.reload();		
	});
}

//删除Banner图片
function deleteHeadImg(uid){
	$.post("<?php echo $this->urls('delbanner','modules','space',array('uid'=>$this->uid));?>",{},function(data) {
		showMsg(data);
		$("#mainpic").css({"background-image":"url()"});
	});
}

//上传图片
function uploadImg(thisA){
	if($("#thisUploadFile").val()==""){
		showMsg("请选择要上传的图片!");
		return false;
	}
	else{
		return true;
	}
}



//编辑博客名称
function editCompanyName()
{
	
}

//保存名称
function closeditcompanyName(thisA)
{
	$('#blog_header_name').html($(thisA).val());
	$('#blog_header_name').bind('click',null,function(){editCompanyName()})

	var name = $(thisA).val();
	if(name == '点击输入公司名称'){return; }
	
	if($('#old_company_name').val() != name){	
		$.post("<?php echo $this->urls('savename','modules','space',array('uid'=>$this->uid));?>",{'companyName':name},
		function(data){
			$('#old_company_name').val( $(thisA).val());
		});
	}
}

//设置样式
function setskin(name)
{
	$('#skincss').attr('href','<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/skin/' + name + '/skin.css');
	document.moduleForm.skinid.value = name;
	
}

function setbanner(num)
{
	$("#mainpic").css({"background": "transparent url(<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/banner/banner" + num + ".jpg)"})
	document.moduleForm.bannerurl.value = "<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/banner/banner" + num + ".jpg";
}

function resetbanner()
{
	if($.browser.msie){
		$("#mainpic").removeAttr('style');
	}else{
		$("#mainpic").css({"background": ""})
	}
	document.moduleForm.bannerurl.value = '';
}

function setstyle(name)
{
	$('#stylecss').attr('href','<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/style/' + name + '/style.css');
	document.moduleForm.styleid.value = name;	
}

function changeCompanyNameCss(type,value)
{
	$('#header h1').css(type,value);
	var nameCss = 	$('#header h1').attr('style');
	document.moduleForm.companyNameCss.value = '#header h1{' + nameCss + '}';
}

function changeSearchCss(type,value)
{
	$('#header .search_area').css(type,value);
	var nameCss = 	$('#header .search_area').attr('style');
	document.moduleForm.searchCss.value = '#header .search_area{' + nameCss + '}';
}



$(document).ready(
	function (){
		//名称管理
		//$('#blog_header_name').bind('click',null,function(){editCompanyName()});
		//空间管理导航条
		$("#tab_pannel").tabs().find(".ui-tabs-nav").sortable({axis:'x'});

	}
);

$(document).ready(
	 function(){
		//设置Logo可移动
		$("#header .logo").draggable(
			{
				containment: "parent",
				cursor: "move",
				stop:function(ui){
					document.moduleForm.logoCss.value = '#header .logo{top:' + $(this).css('top') + '; left:'+$(this).css('left') + ';}';
				}				
			}
		);	
		//设置名称可移动	
		$("#header h1").draggable(
			{
				containment: "parent",
				cursor: "move",
				stop:function(ui){
					//document.moduleForm.companyNameCss.value = '#header h1{font-size:24px;top:' + $(this).css('top') + ';left:'+$(this).css('left') + '; color:#000; font-family:Arial;}';
					changeCompanyNameCss('left',$(this).css('left'));
					changeCompanyNameCss('top',$(this).css('top'));
				}
			}
		);
		$("#header h1").append($('#com_name_set'))
		$('#com_name_set').css('display','block');

		
		//设置搜索可移动	
		$("#header .search_area").draggable(
			{
				containment: "parent",
				cursor: "move",
				stop:function(ui){
					changeSearchCss('left',$(this).css('left'));
					changeSearchCss('top',$(this).css('top'));
				}
			}
		);
		$("#header .search_area").append($('#search_forms'))
		$('#search_forms').css('display','block');
		
		
	  }
); 
</script>


<div style="display:; width:99%; margin:5px auto 0 auto;" id="style_tool_bar">
<form action="<?php echo $this->urls('save','modules','space',array('uid'=>$this->uid),'membersave');?>" name="moduleForm" method="post">
<div id="tab_pannel">
<ul>
<div style="float:right;">
<input type="hidden" name="layoutinfo" id="layoutinfo" />
  <input type="submit" name="button4" id="button4" value="保存修改" onclick="savelayout();" style="background:#FFCC33; border:1px #FF6600 solid;" />
  <input type="button" name="button5" id="button5" value="取消" onclick="closeEdit();" />
  <input type="hidden" name="bannerurl" value="<?php echo $this->spacesetting['bannerurl'];?>" />
  <input type="hidden" name="bannerurloldvalue" value="<?php echo $this->spacesetting['bannerurl'];?>" />
  <input type="hidden" name="skinid" value="<?php echo $this->spacesetting['skin'];?>" />
  <input type="hidden" name="styleid" value="<?php echo $this->spacesetting['style'];?>" />
  <input type="hidden" name="contentclass" value="<?php echo $this->spacesetting['contentclass'];?>" />
  <input type="hidden" name="blogname" value="<?php echo $this->spacesetting['blogname'];?>" />  
  <input type="hidden" name="templateid" id="templateid" value="<?php echo $this->spacesetting['template'];?>" />
  <input type="hidden" name="logoCss" id="logoCss" value="<?php echo $this->spacesetting['css']['logoCss'];?>" />
  <input type="hidden" name="companyNameCss" id="companyNameCss" value="<?php echo $this->spacesetting['css']['companyNameCss'];?>" />
  <input type="hidden" name="sloganCss" id="sloganCss" value="<?php echo $this->spacesetting['css']['sloganCss'];?>" />
  <input type="hidden" name="searchCss" id="searchCss" value="<?php echo $this->spacesetting['css']['searchCss'];?>" />
</div>
<li><a href="#fragment-1" >模块管理</a></li>
<li><a href="#fragment-2" >版式设置</a></li>
<li><a href="#fragment-3" >导航设置</a></li>
<li><a href="#fragment-4" >更换皮肤</a></li>
<li><a href="#fragment-5" >更换模板</a></li>
<li><a href="#fragment-6" >更换Banner</a></li>
</ul>
<br style="clear:both;" />
</div>

<div id="fragment-1" >
<ol class="layout_module">
<?php	
$unusemodulekey = $this->spacesetting['modules'];
$moduleArray = $this->sysmodules;
?>
<?php foreach ($moduleArray as $key=>$mod):?>
<li><input name="mod<?php echo $mod['id'];?>" type="checkbox" id="mod<?php echo $mod['id'];?>" value="<?php echo $mod['field'];?>" onclick="setModule(this);"<?php echo (in_array($mod['field'],$unusemodulekey) or empty($unusemodulekey))?' checked="checked"':'';?> />
<?php echo $this->menuname[$mod['field']];?></li>
<?php endforeach; ?>
</ol>
<div class="clear"></div>
  
</div>

<div id="fragment-2" >
	<div class="layout_line" style="cursor:pointer;">

    	<!--<div class="layout_bs1_1" onclick="setLayout(1,1,'');"></div>-->
    	<div class="layout_bs2_1" onclick="setLayout(2,1,'r2-230')"></div>
        <div class="layout_bs2_2" onclick="setLayout(2,2,'l2-310')"></div>
        <div class="layout_bs2_3" onclick="setLayout(2,3,'l2-230')"></div>
    	<!--<div class="layout_bs3_1" onclick="setLayout(3,1,'lc3-190')"></div>
        <div class="layout_bs3_2" onclick="setLayout(3,2,'rc3-190')"></div>
        <div class="layout_bs3_3" onclick="setLayout(3,3,'lr3-190')"></div>
        <div class="layout_bs3_4" onclick="setLayout(3,4,'lr3-190')"></div>-->
    </div>
        <div class="clear"></div>
   <!-- <div class="layout_line">
    	<div class="layout_bs4_1"></div>
        <br class="layout_clear" />
    </div>-->
</div>

<div id="fragment-3" >
 
<ol class="layout_module">
<?php 
$usermenus = $this->userMenus;
$sysmenus = $this->nonExistsMenus;
?>
<?php if(is_array($usermenus))foreach($usermenus as $menu):?>
<li style="width:24%;">
<input name="umenu_isshow[<?php echo $menu['code'];?>]" type="checkbox" value="1" checked="checked" style="float:left; width:20px;" />
<input type="text" name="umenu_name[<?php echo $menu['code'];?>]" value="<?php echo $menu['name'];?>" style="width:80px;" />
<input name="umenu_listorder[<?php echo $menu['code'];?>]" type="text" value="<?php echo $menu['order'];?>" size="10" maxlength="3" style="width:30px;" />
</li>
<?php endforeach; ?>
<?php if(is_array($sysmenus))foreach($sysmenus as $menu):?>
<li style="width:24%;"><input name="umenu_isshow[<?php echo $menu['code'];?>]" type="checkbox" value="1" style="float:left; width:20px;" />         
<input type="text" name="umenu_name[<?php echo $menu['code'];?>]" value="<?php echo $menu['name']; ?>" style="width:80px;" /> 
<input name="umenu_listorder[<?php echo $menu['code'];?>]" type="text" size="10" maxlength="3" style="width:30px;" value="<?php echo $menu['order'];?>" /></li>
<?php endforeach;?> </ol>

<div class="clear"></div> 
  </div>
  </form>
  <div id="fragment-4" >
    <!--<h2>选择风格</h2>-->
    <ol>
  	<li onclick="setskin(1);"><a href="#"><img src="<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/skin/1/skin_small.gif" width="100" height="80" /><span>天蓝风格</span></a></li>
    <li onclick="setskin(2);"><a href="#"><img src="<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/skin/2/skin_small.gif" width="100" height="80" /><span>红色风格</span></a></li>  
    <li onclick="setskin(3);"><a href="#"><img src="<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/skin/3/skin_small.gif" width="100" height="80" /><span>拉丝风格</span></a></li> 
  	<li onclick="setskin(4);"><a href="#"><img src="<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/skin/4/skin_small.gif" width="100" height="80" /><span>粉红风格</span></a></li>
  	<li onclick="setskin(5);"><a href="#"><img src="<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/skin/5/skin_small.gif" width="100" height="80" /><span>青蓝风格</span></a></li>
    <li onclick="setskin(6);"><a href="#"><img src="<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/skin/6/skin_small.gif" width="100" height="80" /><span>亮黑风格</span></a></li> 
    <li onclick="setskin(7);"><a href="#"><img src="<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/skin/7/skin_small.gif" width="100" height="80" /><span>青绿风格</span></a></li>  
    <li onclick="setskin(8);"><a href="#"><img src="<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/skin/8/skin_small.gif" width="100" height="80" /><span>紫蓝风格</span></a></li> 
    <li onclick="setskin(9);"><a href="#"><img src="<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/skin/9/skin_small.gif" width="100" height="80" /><span>金黄风格</span></a></li> 
    <li onclick="setskin(10);"><a href="#"><img src="<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/skin/10/skin_small.gif" width="100" height="80" /><span>啡色风格</span></a></li> 
  </ol>
  <div class="clear"></div> 
  </div>

  <div id="fragment-5" ><!--<h2>选择模板</h2>-->
  <ol>
  	<li><a href="#" onclick="setstyle(1);return false;"><img src="<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/style/1/mb.gif" width="150" height="115" /><span>模板一</span></a></li>
    <li><a href="#" onclick="setstyle(2);return false;"><img src="<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/style/2/mb.gif" width="150" height="115" /><span>模板二</span></a></li> 
    <li><a href="#" onclick="setstyle(3);return false;"><img src="<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/style/3/mb.gif" width="150" height="115" /><span>模板三</span></a></li> 
 	
  </ol>
  <div class="clear"></div> 
  </div>
  <div id="fragment-6" ><!--选择Banner-->

  <h2><a href="#" onclick="resetbanner(); return false;" style=" float:right; font-weight:bold;">[恢复默认图片]</a><span>选择系统Banner </span></h2>
  <div class="mb-div">
   <ol>
    <?php if(is_array($this->banners))foreach ($this->banners as $banner):
    preg_match("/banner(\d+)\.jpg/i",$banner,$matchs);
    $key = $matchs[1];
    ?>
    <li><a href="#" onclick="setbanner(<?php echo $key;?>);return false;"><img src="<?php echo $this->BaseUrl;?>/public/<?php echo $this->module;?>/banner/s/<?php echo $banner;?>" width="150" /></a></li>
    <?php endforeach;?>  
    <ol>
    <div class="clear"></div></div>

  <h2><span>自己上传Banner</span></h2>
  <div id="change_pic_form">
    <iframe name="headForm" height="0" width="0" frameborder="0"></iframe>
    <form enctype="multipart/form-data" name="uploadForm" target="headForm" method="post" action="/com/module/upload/lan/1/uid/2">
    <input id="thisUploadFile" type="file" name="upbanner" /> <input onclick="return uploadImg(this);" type="submit" value="上传" />
    </form>
     图片大小为：宽 980px X 高 200px 
    </div>  
  </div>

<div style="clear:both;"></div>
<div id="com_name_set" style="display:none;">
      <select name="select" id="select" onchange="changeCompanyNameCss('font-family',this.value)">
      <option value='Arial'>Arial</option>
      <option value='"Times New Roman"'>Times New Roman</option>
      <option value='"Courier New"'>Courier New</option>
      <option value='Georgia'>Georgia</option>

      <option value='Verdana'>Verdana</option>
      <option value='Geneva'>Geneva</option>
      <option value='"宋体"'>宋体</option>
      <option value='"黑体"'>黑体</option>
      <option value='"华文行楷"'>华文行楷</option> 
      <option value='"隶书"'>隶书</option> 
       <option value='"幼圆"'>幼圆</option>     
      </select>    
    <select name="select2" id="select2" onchange="changeCompanyNameCss('font-size',this.value)">

      <option value="14px">14px</option>
      <option value="18px">18px</option>
      <option value="24px">24px</option>
      <option value="36px">36px</option>
      <option value="48px">48px</option>
    </select>

    <select name="select3" id="select3" style="width:80px;" onchange="changeCompanyNameCss('color',this.value); this.style.backgroundColor=this.value">
      <option value="" selected="selected">选择颜色</option>
      <option value="#000000" style="background-color:#000000;"></option>
      <option value="#FF0000" style="background-color:#FF0000;"></option>
      <option value="#00FF00" style="background-color:#00FF00;"></option>
      <option value="#0000FF" style="background-color:#0000FF;"></option>
      <option value="#FFFF00" style="background-color:#FFFF00;"></option>
      <option value="#00FFFF" style="background-color:#00FFFF;"></option>
      <option value="#FF00FF" style="background-color:#FF00FF;"></option>
      <option value="#FFFFFF" style="background-color:#FFFFFF;"></option>
    </select>
</div>
<div id="search_forms" style="display:none;">
        <select name="select" id="select" onchange="changeSearchCss('font-family',this.value)">
      <option value='Arial'>Arial</option>
      <option value='"Times New Roman"'>Times New Roman</option>
      <option value='"Courier New"'>Courier New</option>
      <option value='Georgia'>Georgia</option>
      <option value='Verdana'>Verdana</option>
      <option value='Geneva'>Geneva</option>
      <option value='"宋体"'>宋体</option>
      <option value='"黑体"'>黑体</option>
      <option value='"华文行楷"'>华文行楷</option> 
      <option value='"隶书"'>隶书</option> 
       <option value='"幼圆"'>幼圆</option>     
      </select>    
    <select name="select2" id="select2" onchange="changeSearchCss('font-size',this.value)">
      <option value="14px">14px</option>
      <option value="18px">18px</option>
      <option value="24px">24px</option>
      <option value="36px">36px</option>
    </select>
    <select name="select3" id="select3" style="width:80px;" onchange="changeSearchCss('color',this.value); this.style.backgroundColor=this.value">
      <option value="" selected="selected">选择颜色</option>
      <option value="#000000" style="background-color:#000000;"></option>
      <option value="#FF0000" style="background-color:#FF0000;"></option>
      <option value="#00FF00" style="background-color:#00FF00;"></option>
      <option value="#0000FF" style="background-color:#0000FF;"></option>
      <option value="#FFFF00" style="background-color:#FFFF00;"></option>
      <option value="#00FFFF" style="background-color:#00FFFF;"></option>
      <option value="#FF00FF" style="background-color:#FF00FF;"></option>
      <option value="#FFFFFF" style="background-color:#FFFFFF;"></option>
    </select>
</div>

<div id="images_handler" style="width:300px; position:absolute; right:0px; bottom:0px; font-size:14px; background:#D2E2F4; line-height:25px; display:none;">
    </div> 
</div>
<div style="margin:5px;"></div>
 